<template>
    <div class="infoUserTop">
        <img :src="user.data.profile.backgroundUrl" alt="" class="bgimg">
        <div class="icons">
            <svg class="icon" aria-hidden="true" @click="$router.push('/')">
                <use xlink:href="#icon-zuojiantou"></use>
            </svg>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-iconfontfenxiang"></use>
            </svg>
        </div>
        <div class="infoUser">
            <img :src="user.data.profile.avatarUrl" alt="" class="profileimg">
            <div class="name">{{user.data.profile.nickname}}</div>
            <div class="userDetail">
                <span>关注 {{user.data.profile.follows}}</span>
                <p class="xian">|</p>
                <span>粉丝 {{user.data.profile.followeds}}</span>
            </div>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex'
    export default {
        data(){
            return{

            }
        },
        computed:{
            ...mapState(['user'])
        },
        mounted(){
            console.log(this.user)
        }
    }
</script>
<style lang="less" scoped>
    .infoUserTop{
        width: 100%;
        height: 5rem;
        .bgimg{
            position: absolute;
            width: 100%;
            height: 40%;
            z-index: -1;
        }
        .icons{
            display: flex;
            justify-content: space-between;
            padding-top:.6rem ;
            .icon{
            fill: #fff;
            margin-left: .3rem;
            margin-right: .3rem;
            width: 1rem;
            }
        }
        .infoUser{
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 2rem;
            .profileimg{
                width: 1rem;
                height: 1rem;
                border-radius: 50%;
            }
            .name{
                font-weight: 700;
                font-size: .4rem;
                color: #fff;
            }
            .userDetail{
                display: flex;
                justify-content: space-around;
                color: #fff;
                font-size: .3rem;
                p{
                    margin:auto .2rem;
                    text-align: center;
                }
            }
        }
    }
</style>